<template>
	<view  :class="currentTheme">
		<a-nabbar :name="`全部城市`" @getNavHeight="getNavHeight"/>
		<view class="u-position-fixed add-city-search-box">
			<view class="u-padding-left-32 u-padding-right-32 u-padding-top-20">
				 <item-search ref="search" placeholder="搜索城市" @change="setDown" v-model="searchName"></item-search>
			</view>
		</view>
		<view class="u-padding-32">
			<view class="fixed-top-empty">
				<index-list :scrollTop="scrollTop" :sticky="false" active-color="white" :activeBgColor="currentThemeObj.primary" v-if="pageCityList.length"  :indexList="indexLetterList" :headerContentHeight="headerContentHeight">
					<view v-for="(item, index) in pageCityList" :key="index">
						<u-index-anchor :index="item.py" 
						:custom-style="{
							backgroundColor:'white',
							borderRadius:'26rpx 26rpx 0 0',
							borderBottom:'1rpx solid rgba(0,0,0,0.1)',
							lineHeight:'1',
							paddingLeft:'20rpx'
						}"/>
						<view class="u-padding-top-20 bg-white u-margin-bottom-20">
							<u-row>
								<u-col span="4" v-for="(c,i) in item.list" :key="i">
									<view class="u-margin-bottom-28 u-flex u-row-center">
										<cityBtn isEdit isPlain width="225rpx" :showDelete="false" :item="c"></cityBtn>
									</view>
								</u-col>
							</u-row>
						</view>
					</view>
					<view style="height: 100rpx;"></view>
				</index-list>
				<empty v-else></empty>
			</view>
		</view>
	</view>
</template>

<script>
	// tips：城市可选择三级城市中的某一级城市 且父子级城市可共存 如 四川省 可和成都市共存  
	import cityBtn from './button.vue'
	import {add,getList,update,deleteIds} from '@/api/crud.js'
	import itemSearch from '@/components/itemSearch/itemSearch.vue'
	import indexList from "@/components/u-index-list/u-index-list.vue"
	// import editModal from './addCityPop/index.vue'
	// import addCity from './addCity.js'
	import empty from '@/components/mescroll-uni/components/mescroll-empty.vue'
	// import {editProductRelCity,editProductTempCity} from '@/api/city.js'
	export default {
		// mixins:[addCity],
		components: {
			cityBtn,itemSearch,indexList,empty
		},
		data() {
			return {
				activeForm:{totalNumber:'',grantNumber:'',address:'',productTempId:''},
				citySelectList:[],
				apiModule:'shopApi',
				option:{},
				scrollTop:0,
				searchName:'',
				timer:null,
				pageCityList:[],
				isCityEdit:false,
				isCityListGroup:true,
				navHeight:{
					navbarHeight:44,
					statusBarHeight:0
				}
			};
		},
		computed: {
			editFlag() {
				return this.option.type==='edit'
			},
			indexLetterList(){
				return this.pageCityList.map(val=>val.py)
			},
			// 92 是搜索框的高度 navHeight是获取的navbar的高度和导航栏高度
			headerContentHeight(){
				return 60 + this.navHeight.navbarHeight+this.navHeight.statusBarHeight
			}
		},
		onLoad(option) {
			this.option = option;
			this.getList()
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
		},
		methods: {
			//获取navbar的高度和导航栏的高度
			getNavHeight(res){
				this.navHeight = res;
			},
			// 搜索 使用源数据citySelectList来做本地检索
			setDown(){
				const query = this.searchName;
				const list = this.$u.deepClone(this.citySelectList)
				if (query !== '') {
					this.loading = true;
					this.pageCityList = []
					setTimeout(() => {
						this.loading = false;
						this.pageCityList = list.map(item => {
							item.list = item.list.filter(val=>val.cityName.toLowerCase().indexOf(query.toLowerCase()) > -1);
							return item
						}).filter(val=>val.list.length)
					}, 20);
				} else {
					this.pageCityList = list;
				}
				this.scrollTop = 0
			},
			//获取
			getList(){
				getList({
					productTempId:this.option.id,
					productId:this.option.id,
					...this.option,
					isLetterSort:true
				},'product','shopApi','getCitys').then(res=>{
					this.citySelectList = res
					this.pageCityList = res;
				})
			},
			
		},
	}
</script>
<style lang="scss">
	/deep/.u-index-bar__index{
		color: #999999;
	}
</style>
<style lang="scss" scoped>
.add-city-search-box{
	background-color: var(--background-color);
	left: 0;
	right: 0;
	z-index: 55;
}
.bg-white{
	background-color: white;
	border-radius: 0 0 26rpx 26rpx;
}
.fixed-top-empty{
	padding-top: 120rpx;
}
</style>
